<template>
	<div class="home-page">
		<div class="banner-wrap">
			<swiper-banner/>
			<div class="content">
				<h1 class="title">朱先森与李菇凉</h1>
      			<p class="desc">这是属于我们的小花园哟~</p>
			</div>
		</div>
		<div class="login">
			<p class="ask">你是我的ta吗?</p>
		    <input type="text" placeholder="请输入姓名或者生日" v-model="userName">
		    <button @click.prevent="submitName">确定</button>
		    <p class="warn" v-show="isWrong">你不是！</p>
		    <p class="tip" v-show="logining">
		    	<span>请</span>
		    	<span>等</span>
		    	<span>待</span>
		    	<span>。</span>
		    	<span>。</span>
		    	<span>。</span>
		    </p>
		</div>
	</div>
</template>

<script>
import swiperBanner from './SwiperBanner.vue'
import { mapState } from 'vuex'

export default {
  	name: 'Home',
  	components: {
    	swiperBanner,
  	},
  	data() {
  		return {
  			logining: false,
  			isWrong: false,
  			userName: '',
  		}
  	},
  	computed:{
		...mapState({
			loginData: state => state.Play.loginData,
		}),
	},
  	methods: {
  		submitName() {
  			if(this.userName == this.loginData.name || this.userName == this.loginData.birth) {
  				this.logining = true;
  				this.isWrong = false;
  				setTimeout(()=> {
  					this.$router.push('/love')
  				}, 1000)
  			} else {
  				this.isWrong = true;
  				this.logining = false;
  			}
  		}
  	}
}
</script>

<style lang="stylus">
.home-page
	min-height 720px
.banner-wrap
	width 100%
	height 180px 
	position relative
	overflow hidden 
	.content
		position absolute
		width 100% 
		height 100%
		left 0 
		top 0
		text-align center 
		text-shadow 1px 1px 1px #111
		z-index 2
		color #fff
		font-size 16px
		line-height 2
		.title 
			margin-top 10px
			font-size 20px 
			animation bounceInDown 1s .5s ease both
		.desc
			animation bounceInLeft 1s .2s ease both
			margin-top 30px
			
@keyframes bounceInDown
	0% 
		opacity 0 
		transform translateY(-200px) rotate(0)
	60% 
		opacity 1 
		transform translateY(30px) rotate(360deg)
	80% 
		transform translateY(-10px)
	100% 
		transform translateY(0)

@keyframes bounceInLeft
	0% 
		opacity 0 
		transform translateX(-20px)
	100% 
		opacity 1 
		transform translateX(0px)

.login 
	text-align center 
	margin-top 30px
	.ask 
		color #999 
		line-height 50px 
	input 
		width 200px 
		outline none 
		height 40px 
		border 1px solid #ddd 
		border-radius 5px 
		background-color transparent
		text-indent 10px
	button 
		color #fff 
		background-color #3385ff 
		border none 
		outline none 
		height 40px 
		width 80px 
		margin-left 10px
		border-radius 5px
	.warn 
		color red 
		line-height 40px	
		font-size 12px	
	.tip 
		color green 
		line-height 40px
		span 
			margin 0 2px
			display inline-block
			animation jump 1s .1s ease infinite
			&:nth-child(1)
				animation-delay .2s
			&:nth-child(2)
				animation-delay .3s
			&:nth-child(3)
				animation-delay .5s
			&:nth-child(4)
				animation-delay .5s
			&:nth-child(5)
				animation-delay .6s
@keyframes jump 
	0% 
		transform translateY(0)
	50% 
		transform translateY(5px)
	100% 
		transform translateY(0)	
	
</style>